<template>
  <h1>会员显示</h1>
    <div>
      名称：
      <input type="text" v-model="query.Name">
      年龄：
      <input type="text" v-model="query.SAge">-<input type="text" v-model="query.EAge">
      会员等级：
      <select v-model="query.LevelId">
        <option value="0">请选择</option>
        <option value="1">青铜会员</option>
        <option value="2">黄金会员</option>
        <option value="3">白银会员</option>
        <option value="4">铂金会员</option>
      </select>
      <input type="button" value="查询" @click="Cha">
      <a href="https://localhost:7147/api/Member/GetMemberDown">导出</a>  <br>  
      <a href="/AddRightView">添加权益</a>
      <table border="1">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>图片</th>
                    <th>会员等级</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
              <tr v-for="h in data">
                    <th>{{ h.Name }}</th>
                    <th>{{ h.Pwd }}</th>
                    <th>{{ h.Age }}</th>
                    <th> <img :src="'https://localhost:7147/'+h.Img" style="width: 60px; height: 60px;" ></th>
                    <th>{{h.LevelName}}</th>
                    <th>{{h.State?"启用":"禁用"}}</th>
                    <th>
                      <input type="button" value="编辑" @click="UpdateMember(h.Id)">
                    </th>
                    <th>
                        <input type="button" :value="h.State?'禁用':'启用'" @click="UpdateMemberState(h.LevelId)">
                    </th>
                </tr>
            </tbody>
        </table>
        一共 {{ querydata.count }}  条
        当前第 {{ query.PageIndex }}  页
        一共 {{ querydata.pagecount }} 页
        一页 {{ query.PageSize }} 条
        <input type="button" v-for="d in querydata.pagecount" :value="d" @click="An(d)">
        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        一页
        <input type="number" v-model="query.PageSize" @click="Tiao">
        条
        跳转：
        <input type="number" v-model="num">
        <input type="button" value="跳转" @click="ZHUAN(num)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
import type { RefSymbol } from '@vue/reactivity';

const routers=useRouter();
const UpdateMember=(val:any)=>{
  routers.push({path:'/DetailMemberView',query:{Id:val}});
}


const Cha=()=>{
  query.value.PageIndex=1;
  Show();
}


const Tiao=()=>{
    Show();
}
let num=0;

const An=(d:any)=>{
    query.value.PageIndex=d;
    Show();
}

const ZHUAN=(val:any)=>{
    if(val>0 && val<=querydata.value.pagecount){
        query.value.PageIndex=val;
        Show();
    }
}


const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }
    if(val==4){
        query.value.PageIndex=querydata.value.pagecount;
        Show();
    }
}


const data=ref([{
    "Id": 0,
  "Name": "",
  "Pwd": "",
  "Age": 0,
  "Img": "string",
  "LevelId": 0,
  "State": true,
  "Delete": true,
  LevelName:""
}])


const query=ref({
  Name:"",
  SAge:0,
  EAge:0,
  LevelId:0,
  PageIndex:1,
  PageSize:3
})

const querydata=ref({
    count:0,
    pagecount:0
})



onMounted(()=>{
  Show();
})

const Show=()=>{
  axios.get("https://localhost:7147/api/Member/GetMember",{params:query.value}).then(res=>{
        data.value=res.data.list;
        querydata.value.count=res.data.count;
        querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize);
  })
}


const UpdateMemberState=(val:any)=>{
  axios.get("https://localhost:7147/api/Member/UpdateMemberState",{params:{Id:val}}).then(res=>{
        if(res.data>0){
          alert('修改状态成功')
          Show();
        }
        else{
          alert('失败')
        }
  })
}





</script>

